<template>
  <view class="page">
    <view class="form">
      <view class="form-item">
        <text class="label">需求标题</text>
        <input type="text" placeholder="请输入(必填)" v-model="form.title">
      </view>
      <view class="form-item">
        <text class="label">报名人数</text>
        <input type="text" placeholder="请输入(选填)" v-model.number="form.applaycount">
      </view>
      <view class="form-item">
        <text class="label">开始时间</text>
        <picker
          mode="date"
          placeholder="请选择开始时间"
          value="当天"
          @change="e => form.start_time = e.detail.value"
        >
          <input placeholder="请选择开始时间" name="start_time" v-model="form.start_time" />
        </picker>
      </view>
      <view class="form-item">
        <text class="label">结束时间</text>
        <picker
          mode="date"
          placeholder="请选择结束时间"
          value="当天"
          @change="e => form.end_time = e.detail.value"
        >
          <input placeholder="请选择结束时间" name="end_time" v-model="form.end_time" />
        </picker>
      </view>
      <view class="img-upload">
        <text>请上传需求图片</text>
        <uni-file-picker
          v-model="imgValue" 
          fileMediatype="image" 
          mode="grid"
          limit="1"
          return-type="object"
          @select="select" 
          @progress="progress" 
          @success="success" 
          @fail="fail" 
        />
      </view>
      <view class="button" @click="toEditor">
        <view class="btn">前往需求编辑</view>
      </view>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from '@/api/mine'
export default {
  data() {
    return {
      editorCtx: null,
      form: {
        title: '',
        content: '',
        applaycount: 0,
        start_time: '',
        end_time: '',
        img: ''
      },
      imgValue: {}
    }
  },
  onLoad() {
    const user_id = uni.getStorageSync('user_id')
    if (!user_id) {
      this.getUserInfo()      
    }
  },
  methods: {
    toEditor() {
      const { title, start_time, end_time, applaycount, img } = this.form
      if (!title || !start_time || !end_time) {
        uni.showModal({
          title: '信息缺失',
          content: '请输入标题、开始时间、结束时间',
          showCancel: false
        })
        return
      }
      if (!applaycount) {
        uni.showModal({
          title: '信息错误',
          content: '报名人数需大于0',
          showCancel: false
        })
        return
      }
      if (new Date(end_time).getTime() < new Date(start_time).getTime()) {
        uni.showModal({
          title: '信息错误',
          content: '结束时间需大于开始时间',
          showCancel: false
        })
        return
      }
      if (!img) {
        uni.showModal({
          title: '图片缺失',
          content: '请上传需求图片',
          showCancel: false
        })
        return
      }
      uni.setStorageSync("demand", this.form)
      wx.navigateTo({
        url: '/pages/editor/index'
      })
    },
    getUserInfo() {
      const token = uni.getStorageSync('token')
      getUserInfo({ token }).then(res => {
        if (res.data) {
          const { user_id } = res.data
          uni.setStorageSync('user_id', user_id)
        }
      })
    },
    // 获取上传状态
    select(e){
      const { tempFilePaths, tempFiles } = e
      this.form.img = tempFilePaths[0]  
    },
    // 获取上传进度
    progress(e){
      // console.debug('上传进度：',e)
    },

    // 上传成功
    success(e){
      // console.debug('上传成功')
    },

    // 上传失败
    fail(e){
      uni.showModal({
        title: '上传失败',
        content: e,
        showCancel: false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding-top: 10px;
  background: #eee;
}
.form {
  width: 100%;
  padding: 10px;
  background: #fff;
  .form-item {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e3e5ea;
    .label {
      width: 80px;
    }
    input {
      flex: 1;
      width: 100%;
      margin-left: 15px;
      text-align: end;
    }
    picker {
      flex: 1;
      input {
        margin: 0;
      }
    }
  }
  .img-upload {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text {
      margin-bottom: 10px;
    }
  }
  .button {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    .btn {
      width: 100px;
      height: 40px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 5px;
      background: orange;
    }
  }
}
</style>